<template>
  <!-- 全局样式 -->
  <div class="registered">
      <!-- logo -->
    <div class="logoimg">
        <img src="https://img3.redocn.com/tupian/20151125/huaweilogo_5398990.jpg" alt="">
    </div>
    <!-- 注册框 -->
    <div class="register">
      <van-form @submit="onSubmit">
          <van-field
            v-model="userName"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="password"
            type="password"
            name="密码"
            label="创建密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">完成注册</van-button>
          </div>
        </van-form>
      <!-- 同意注册 -->
      <div class="controls" @click="!agree">
     <input 
      type="checkbox" 
      v-model="agree" 
      name="协议"
    />
    <span>同意协议并注册《网易严选》</span>
      </div>
      <!-- 完成注册前往登录 -->
      <div class="btn">
        <button @click="gotologin">前往登录</button>
      </div>
    </div>
  </div>  
</template>

<script>
import { reqRegister } from '@/axios/index'
import {phoneReg,pwdReg} from '@/utils/reg'
import { Dialog } from 'vant'
export default {
  name:'regisTered',
  components:{
    [Dialog.Component.name]: Dialog.Component,
  },
  data() {
    return {
      userName:'',
      password:'',
      agree:false,
    }
  },
  methods:{

    //提示框
    gogo(v){
      Dialog.alert({
        message: `${v}`,
      }).then(() => {
      })
    },
    //表单插件验证
    gotologin(){
      this.$bus.$emit('tologin',1)
    },
    //注册
    async onSubmit(values){
      //提取手机号 密码等
      let {userName,password,agree} = this
      if(!phoneReg.test(this.userName)&&!pwdReg.test(this.password)){
        this.gogo('账号或密码输入不合法')
        return 
      }else if(!agree){
        this.gogo('请同意注册')
        return  
      }
      //发送注册请求
      let result = await reqRegister({userName,password})
      console.log(result)
      if(result.code === 200){
        this.gogo('注册成功')
      }else{
        this.gogo(result.message)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.registered{
    text-align: center;
    .logoimg{
        img{
            width: 120px;
        }
    }
    .register{
        font-size: 17px;
        .content{
            margin: 20px 0 auto;
            width: 100%;
            height: 50px;
            position: relative;
            .getcode{
              width: 70px;
              font-size: 10px;
            }
            .error-msg {
              position: absolute;
              bottom: 5px;
              left: 100px;
               font-size: 10px;
               color: rgb(240, 3, 3);
                }
        }
        .controls{
            margin: 10px 0;
        }
        .btn{
            button{
                margin: 0 30px;
            }
        }
    }
    
}
</style>